<template>
    <div class="box" >
        <div class="list"  >
            <div class="item" v-for="(item,i) in MZMedicalRecord" :key="i" @click="goMzDetail(item)"  >
                <!--<router-link :to="{path:'/mzjl/detail'}">-->
                    <div class="title">
                        <p class="fl">{{item.jzyy}}</p>
                        
                        <!-- <span>就诊中</span> -->
                    </div>
                    <p class="subject">{{item.jzks}}
                        <span >{{item.jzlx}}</span>
                        <!-- <span class="blue">专家门诊</span> -->
                    </p>
                    <p class="date">就诊日期：{{item.jzsj}}</p>
                <!--</router-link>-->
                
            </div>
        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName" @scrollEnd="scrollEnd"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>

import tips from '@/components/tips.vue'
import { getMZMedicalRecordApi} from '@/api/healthRecords'
export default {
    name: 'MZJL',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App',
            hosName:'',//医院名称,
            zjhm: JSON.parse(localStorage.getItem('zjhm')),
            MZMedicalRecord:[],
            isScrollend:false,
            showLength:6,
            data:[]
        }
    },
    mounted () {
    },
    methods: {
        getMZMedicalRecord() {
            getMZMedicalRecordApi(JSON.stringify(this.zjhm)).then(response => {
                if (response.data.code == 1) {
                    this.MZMedicalRecord = response.data.data;
                    // this.data=response.data.data
                    // response.data.data.forEach((item,index) => {
                    //     if(index<this.showLength){
                    //         this.MZMedicalRecord.push(item)
                    //     }
                    // });
                }
            }).catch(error => {

            });
        },
        goMzDetail(item) {
            this.$router.push({ name: "mzjlDetail", query: { item } });
            localStorage.setItem('mzjbxx',  JSON.stringify(item))
        },
        scrollEnd(val){
            // 触底加载数据
            this.isScrollend = val
            // if(this.isScrollend && this.isScrollend<this.data.length){
            //     this.MZMedicalRecord = []
            //     this.showLength++
            //     this.getMZMedicalRecord()
            // } else {
            //     console.log('已加载全部')
            //     return
            // }
        }
    },
    components:{
        tips
    },
    created() {
        this.getMZMedicalRecord();
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float: left;
}
.fr{
    float: right;
}
.list{
    .item{
        background: #fff;
        border-bottom: #ddd solid 1px;
        padding: 1rem;
        .title{
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 1px;
            overflow: hidden;
            font-weight: bold;
            p{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 77%;
            }
            span{
                color:#18B670;
                float: right;
            }
        }
        .subject{
            color: #969696;
            font-size: 1rem;
            margin-top: 0.6rem;
            span{
                display: inline-block;
                border: #FFA73B solid 1px;
                color: #FFA73B;
                border-radius: 13px;
                margin-left: 10px;
                padding: 0 0.6rem;
                font-size: 1rem;
            }
            span.blue{
                border:#3DC4F5 solid 1px;
                color:#3DC4F5;
            }
        }
        .date{
            text-align: right;
            color:#969696;
            font-size: 1rem;
            margin-top:0.5rem;
        }
    }
}

</style>
